<template>
   <view class="list" v-if="list.length > 0">
	  
	<view  class="block_670 position-box" >
	    <scroll-view  class="scroll-view_H">
	        <view class="uni-scroll-view">
		        <view class="uni-scroll-view" style="overflow: auto hidden;">
			        <view class="uni-scroll-view-content">
	                     <view  class="p_nav">
		                    <navigator :url="'/pages/article/detail?id=' + item.id" class="nav nav_5"  style="width: 20%;" v-for="(item, index) in list" :key="index" hover-class="none">
				              
				                   <image :src="item.image" class="img" mode="aspectFill"></image>
				                   <view  class="text ">{{ item.title }}</view>
			                 
				            </navigator>
				
		                </view>
		            </view>
		        </view>
		    </view>
		</scroll-view>
	</view>
  </view>
</template>

<script>
export default {
	name: 'navList',
	props: {
		list: {
			type: Array,
			default: function(e) {
				return [];
			}
		}
	},
	filters: {
		timeFormat(val){
			if(val && val.length > 10){
				val = val.substr(0,10)
			}
			return val;
		}
	}
};

</script>

<style lang="scss">
/*二级菜单*/
//20221011
		.position-box {
		  position: relative;
		  z-index: 9;
		  background: #fff;
		  //padding-top: 90px;
		}
		.block_670 {
		  width: 348px;
		  margin: auto;
		}
		.scroll-view_H {
		  white-space: nowrap;
		  width: 348px;
		  margin: auto;
		}
		.uni-scroll-view, .uni-scroll-view-content {
		  width: 100%;
		  height: 100%;
		}
		.uni-scroll-view {
		  position: relative;
		  -webkit-overflow-scrolling: touch;
		  max-height: inherit;
		}
		content {
		  width: 100%;
		  height: 100%;
		}
		.p_nav .nav_5 {
		  width: 20%;
		}
		.p_nav .nav {
		  width: 25%;
		  height: 75px;
		  margin: 10px 0;
		  display: inline-block;
		}
		.p_nav .nav_5 .img {
		  width: 46px;
		  height: 46px;
		  display: block;
		      margin: auto;
		}
		.p_nav .nav .text {
		  color: #333;
		}
		.p_nav .nav .text {
		  height: 18px;
		  line-height: 18px;
		  text-align: center;
		  font-size: 13px;
		  font-weight: 700;
		  color: #000;
		  margin-top: 10px;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		}
</style>
